<template>
  <view class="container">
    <u-navbar
      :background="{ backgroundColor: '#fff' }"
      backIconColor="#333"
      title-color="#333"
      title="登录"
      :border-bottom="false"
      :is-back="false"
    >
      <view class="slot-content" @click="goToBack">
        <u-icon name="close" size="30"></u-icon>
      </view>
    </u-navbar>
    <view class="top">
      <u-icon :name="`${getImageUrl('logo.png')}`" size="140"></u-icon>
    </view>
    <view class="main">
      <view v-if="regStatus" class="login-title dis-flex flex-x-center">
        <view class="title-item" @click="status = 1">
          手机注册
          <view v-if="status == 1" class="underline"></view>
        </view>
      </view>
      <view v-else class="login-title dis-flex flex-x-center">
        <view class="title-item" @click="status = 1">
          验证码登录
          <view v-if="status == 1" class="underline"></view>
        </view>
        <view class="title-item" @click="status = 2">
          密码登录
          <view v-if="status == 2" class="underline"></view>
        </view>
      </view>
      <view v-if="status == 1" class="">
        <view class="inp">
          <u-input
            v-model="form.mobile"
            type="text"
            placeholder="请输入手机号"
            clearable
            autocomplete="off"
            prefix-icon="phone"
          />
        </view>
        <view class="inp">
          <u-input
            v-model="form.code"
            type="text"
            placeholder="请输入验证码"
            clearable
            autocomplete="off"
            prefix-icon="file-text"
          />
          <text v-if="time <= 0" @click="onCode" style="color: #999999">获取验证码</text>
          <text v-else style="color: #999999">{{ time }}秒后重新获取</text>
        </view>
      </view>
      <view v-else-if="status == 2" class="">
        <view class="inp">
          <u-input
            v-model="form.mobile"
            type="text"
            placeholder="请输入手机号"
            clearable
            autocomplete="off"
            prefix-icon="phone"
          />
        </view>
        <view class="inp">
          <u-input
            v-model="form.password"
            type="password"
            placeholder="请输入登录密码"
            clearable
            autocomplete="off"
            prefix-icon="lock"
          />
        </view>
      </view>
      <text v-if="regStatus" @click="register(1)" style="font-size: 26rpx; color: #999999"
        >返回登录</text
      >
      <text
        v-if="!regStatus && status == 1"
        @click="register(2)"
        style="font-size: 26rpx; color: #999999"
        >用户注册
      </text>
      <text
        v-show="status == 2"
        @click="routeTo('/universal/forgot-password/forgot-password')"
        style="font-size: 26rpx; color: #999999"
        >忘记密码？
      </text>
    </view>
    <view class="floor">
      <view class="" style="display: flex; margin-bottom: 20rpx">
        <image
          @click="isSelected = !isSelected"
          class="checkIcon"
          src="@/static/selected.png"
          v-if="isSelected"
        ></image>
        <image
          @click="isSelected = !isSelected"
          class="checkIcon"
          src="@/static/unselect.png"
          v-else
        ></image>
        <view
          @click.stop.prevent="onPolicy('privacy_policy')"
          class=""
          style="font-size: 26rpx; margin-left: 10rpx"
        >
          我已阅读并同意
          <text style="color: #8cc340">《隐私政策》</text>
        </view>
      </view>

      <view class="login-btn" @click="submit">
        {{ title }}
      </view>
    </view>
    <!-- <view class="" style="display: flex;flex-direction: column;align-items: center;">
      <view class="other">
        <view class="divider"></view>
        <text class="other-title">其它登录方式</text>
        <view class="divider"></view>
      </view>
      <view class="other-login">
      <view class="icon-box">
        <u-icon name="/static/img/wxzf.png" size="50"></u-icon>
      </view>
      <view class="icon-box">
        <u-icon name="/static/img/zfb.png" size="50"></u-icon>
      </view>
    </view>
    </view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      isSelected: true,
      regStatus: false,
      time: 0,
      status: 2,
      inpType: true,
      title: '立即登录',
      form: {
        mobile: '',
        password: '',
        scene: 1,
        code: ''
      },
      phoneForm: {
        mobile: '',
        code: ''
      }
    }
  },
  onShow() {
    // 已登录的情况下不允许跳转到登录页
    if (this.$utils.isLogin()) {
      this.$utils.loginToBack()
    }
  },
  methods: {
    goToBack() {
      this.$utils.loginToBack()
    },
    onCode() {
      this.$u.post('/app-api/member/auth/send-sms-code', this.form).then((res) => {
        this.$u.toast(res.msg || '发送成功')
        if (Number(res.code) === 0) {
          this.time = 60
          let it = setInterval(() => {
            if (this.time <= 0) {
              clearInterval(it)
              return
            }
            this.time -= 1
          }, 1000)
        }
      })
    },
    onPolicy(key) {
      this.$utils.route({
        url: '/universal/webcontent/webcontent',
        params: {
          key
        }
      })
    },
    routeTo(url) {
      uni.navigateTo({
        url
      })
    },
    register(e) {
      if (!this.isSelected) {
        this.$u.toast('请仔细阅读并同意《隐私政策》')
        return
      }
      this.regStatus = !this.regStatus
      this.form.code = ''
      if (e == 1) {
        this.form.scene = 1
        this.title = '立即登录'
      } else {
        this.form.scene = 0
        this.title = '立即注册'
      }
    },
    submit() {
      if (!this.isSelected) {
        this.$u.toast('请仔细阅读并同意《隐私政策》')
        return
      }
      if (!this.form.mobile) {
        this.$u.toast('手机号不能为空')
        return
      }
      if (!this.form.password && this.status == 2) {
        this.$u.toast('密码不能为空')
        return
      }
      if (!this.form.code && this.status == 1) {
        this.$u.toast('验证码不能为空')
        return
      }
      this.form.inviteCode = uni.getStorageSync('saleMemberNo') || ''
      if (this.regStatus) {
        this.$u.post('/app-api/member/auth/registerV2', this.form).then((res) => {
          this.$u.toast(res.msg || '注册成功，请登录')
          this.regStatus = false
        })
        return
      }
      if (this.status == 1) {
        this.$u.post('/app-api/member/auth/sms-login', this.form).then((res) => {
          if (Number(res.code) !== 0) {
            this.$u.toast(res.msg)
            return
          }
          uni.setStorageSync('tokenInfo', res.data)
          this.loginSuccess()
        })
        return
      }
      this.$u.api.setUerPwdLogin(this.form).then((res) => {
        if (Number(res.code) !== 0) {
          this.$u.toast(res.msg)
          return
        }
        uni.setStorageSync('tokenInfo', res.data)
        this.loginSuccess()
      })
    },
    loginSuccess() {
      this.$u.toast('登录成功')
      this.$u.api.getUserInfo().then((res) => {
        uni.setStorageSync('userInfo', res.data)
        uni.$emit('resatrt')
        uni.$emit('msgList')
        // #ifdef APP
        uni.getPushClientId({
          success(res) {
            uni.setStorageSync('cid', res.cid)
            console.log('lllccciidd', uni.getStorageSync('cid'))
            uni.$u.post('/app-api/im/push/bindPushId', {
              clientPushId: res.cid
            })
          },
          fail(err) {
            console.log(err)
          }
        })
        // #endif
      })
      this.$utils.loginToBack()
    }
  }
}
</script>

<style>
.slot-content {
  margin-left: 20rpx;
}

.container {
  height: 100vh;
  background: linear-gradient(135deg, #f8fcff 25%, #eff9ff 50%, #fef7f7 75%, #f8fcff 100%);
  padding: 20rpx 58rpx;
}

.top {
  margin-top: 50rpx;
  height: 220rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  padding: 58rpx 0;
}

.login-title {
  display: flex;
  font-size: 36rpx;
}

.title-item {
  height: 60rpx;
  margin-right: 40rpx;
  position: relative;
}

.underline {
  width: 50rpx;
  height: 10rpx;
  border-bottom: 1px solid #0f76bb;
  transform: translateX(-50%);
  bottom: -3px;
  left: 50%;
  position: absolute;
}

.inp {
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  height: 90rpx;
  background-color: #fff;
  margin: 30rpx 0;
}

.inp input {
  flex: 1;
  margin: 0 20rpx;
}

.divider {
  width: 120rpx;
  height: 2rpx;
  border-bottom: #dadada solid 2rpx;
}

.floor {
  margin: 50rpx 0 120rpx 0;
}

.login-btn {
  width: 650rpx;
  height: 90rpx;
  font-size: 32rpx;
  color: #fff;
  background-color: #10a28f;
  text-align: center;
  line-height: 90rpx;
  border-radius: 40rpx;
  margin: 10rpx auto;
}

.other {
  display: flex;
  align-items: center;
}

.other-title {
  font-size: 26rpx;
  color: #787878;
  margin: 0 30rpx;
}

.other-login {
  display: flex;
}

.icon-box {
  width: 80rpx;
  height: 80rpx;
  border: #dadada solid 2rpx;
  border-radius: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20rpx;
}

.checkIcon {
  width: 32rpx;
  height: 32rpx;
}
</style>
